<template>
    <!-- 该组件为编辑订单中的继续添加商品组件 -->
    <view class="all">
        <view class="colseshow" @click="CloseWindow"></view>
        <view class="head">
            <text>选择车辆</text>
            <image @click="CloseWindow" src="../../../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <scroll-view scroll-y="true">
                <view class="list">
                    <view class="item" v-for="(item, k) in carList" :key="k">
                        <text class="first">{{ item.plate_no}}</text>
                        <text>载重 {{ item.capacity }}吨</text>
                        <button class="btn" @click="postedit(item)" type="default">确定</button>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            list:[]
        };
    },
    created() {},
    props: {
        'carList': {
            type: Array,
            default: []
        }
    },
    methods: {
        // 关闭添加物品弹窗
        CloseWindow() {
            this.$emit('closewin');
        },
        // 确定编辑
        postedit(item) {
            this.$emit('selectCar', item);
        }
    }
};
</script>

<style lang="scss" scoped>
.all {
    position: relative;
    height: 100%;
}

.head {
    height: 88rpx;
    background-color: #ffffff;

    text {
        margin-left: 30rpx;
        line-height: 88rpx;
    }

    image {
        float: right;
        width: 85rpx;
        height: 85rpx;
    }
}

.box {
    padding: 30rpx;

    .kg {
        width: 100%;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        color: #999999;
        font-size: 36rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
            flex-grow: 1;
            padding: 30rpx;
        }
        button {
            margin: 0;
            padding: 0rpx 30rpx;
            color: #fff;
            background-color: #1bc078;
        }
    }
}

.list {
    padding: 30rpx;
    height: 800rpx;

    .item {
        width: 100%;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        color: #999999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        padding: 5rpx 20rpx;
        font-size: 36rpx;
        gap: 20rpx;

        text.first {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .btn {
            min-width: 70px;
            padding: 0rpx 30rpx;
            background-color: #2b85e4;
            color: #fff;
            margin: 0;
            transform: scale(0.8);
        }
    }
}

.colseshow {
    width: 750rpx;
    height: calc(100% - 1028rpx);
    opacity: 0.1;
    background-color: #000000;
}

.backgroundcolor {
    background-color: #eeeeee;
}
</style>
